﻿@import "../../styles/mixins/btn";
@import "../../styles/mixins/vars";

.btn {
    font-size: rem(14);
    position: relative;
    display: inline-block;
    padding: 0 $d3;
    cursor: pointer;
    margin-bottom: $d5;
    vertical-align: middle;
    touch-action: manipulation;
    line-height: rem(28);
    height: rem(30);
    min-width: rem(30);
    border: solid 1px transparent;
    border-radius: rem(3);
    overflow: hidden;
    user-select: none;
    &:focus,
    &:active:focus,
    &.active:focus,
    &.focus,
    &:active.focus,
    &.active.focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    &:hover,
    &:focus,
    &.focus {
        color: #333;
        text-decoration: none;
    }

    &:active,
    &.active {
        background-image: none;
        outline: 0;
        box-shadow: inset 0 3px 20px rgba(0, 0, 0, .2);
    }

    @each $color, $value in $themes-colors {
        &.btn-#{$color} {
            @include button(#fff, $value);
        }
    }
    &.btn-default {
        @include button(#333, $default, #ccc);
    }
    &[disabled], &.loading {
        color: #fff !important;
        background-color: rgba(0, 0, 0, .125) !important;
    }
    .iconfont {
        margin-right: $d1;
    }
    &.loading {
        .icon-loading {
            display: inline-block;
            margin-right: $d1;
            animation: rotate 1s linear infinite;
        }
    }
    &.icon-right {
        .iconfont {
            float: right;
            margin-right: 0;
            margin-left: $d1;
        }
    }
}

.btn-group {
    .btn {
        margin-right: $d4;
    }
}